<template>
	<div class="comment-contioner">
		<textarea rows="4" placeholder="请留下您的评论(最大120个字)" maxlength="100" v-model="commentContent"></textarea>
		<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
		<div class="mui-card">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="(item,index) in commentlist" :key="item.id">
					<div class="mui-media-body">
						<div class="sub-title">
							<span>第{{index+1}}楼 {{item.author}}</span>
							<span>{{item.dateTimes|dateFormat}}</span>
						</div>
						<p class='mui-ellipsis'>{{item.content}}</p>
					</div>
				</li>
			</ul>
		</div>
		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>
<script>
	import {Toast} from "mint-ui";
	export default{
		data(){
			return {
				pageIndex : 1,
				commentlist:[],
				commentContent:""
			}
		},
		created() {
			this.getComment();
		},
		methods:{
			//获取评论
			getComment(){
				this.$http.get("/myvue/comment/"+this.id+"?pageIndex="+this.pageIndex).then(res=>{
					this.commentlist = this.commentlist.concat(res.body);
				});
			},
			getMore(){
				this.pageIndex++;
				this.getComment();
			},
			postComment(){
				if(!this.commentContent){
					return Toast("发表内容不能为空");
				}
				this.$http.post("/myvue/comment/save",{"content":this.commentContent},{emulateJSON: true}).then(res=>{
					if(res.body.code == 1){
						this.commentlist.unshift({"content":this.commentContent,"dateTimes":Date.now(),"author":"匿名"});
						this.commentContent = "";
						Toast("发表成功");
					}
				});
			}
		},
		props:["id"]
	}
</script>

<style lang="less" scoped="scoped">
.comment-contioner{
	width: 100%;
	textarea{
		margin: 0px;
		font-size: 14px;
	}
}
.mui-card{
	padding: 0px 0px;
}
.mui-table-view{
	margin: 0px 0px;
	width: 100%;
}
.sub-title{
	display: flex;
	justify-content: space-between;
}
</style>
